.#{$content-class} {
    code {
        color: $code-color;
        padding: 0.25rem 0.5rem;
        margin: 0;
        font-size: 17px;
        font-weight: 500;
        background: $code-color-background;
        border-radius: 3px;
        .token {
            &.deleted {
                color: #ec5975;
            }
            &.inserted {
                color: $color-primary;
            }
        }
    }
    pre,
    pre[class*="language-"] {
        line-height: 1.5;
        padding: 1.25rem 1.5rem;
        margin: 2rem 0;
        background-color: $code-color-background;
        border-radius: 6px;
        overflow: auto;
        code {
            color: $code-color;
            padding: 0;
            background-color: transparent;
            border-radius: 0;
        }
    }
}

div[class*="language-"] {
    position: relative;
    background-color: $code-color-background;
    border-radius: 6px;
    .highlight-lines {
        user-select: none;
        padding-top: 1.3rem;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        line-height: 1.5;
        .highlighted {
            background-color: $code-color-background;
        }
    }
    pre,
    pre[class*="language-"] {
        background-color: transparent;
        position: relative;
        z-index: 1;
        code {
            font-weight: 500;
            line-height: 1.5;
        }
    }
    &::before {
        position: absolute;
        z-index: 3;
        top: .8em;
        right: 1em;
        font-size: .75em;
        color: $code-color;
    }
    &:not(.line-numbers-mode) {
        .line-numbers-wrapper {
            display: none;
        }
    }
    &.line-numbers-mode {
        .highlight-lines .highlighted {
            position: relative;
            &::before {
                content: " ";
                position: absolute;
                z-index: 3;
                left: 0;
                top: 0;
                display: block;
                width: $line-numbers-wrapper-width;
                height: 100%;
                background: rgba($color-black, 66%);
            }
        }
        pre {
            padding-left: $line-numbers-wrapper-width + 20px;
            vertical-align: middle;
        }
        .line-numbers-wrapper {
            position: absolute;
            top: 0;
            width: $line-numbers-wrapper-width;
            text-align: center;
            color: mix($code-color, $code-color-background, 60%);
            padding: 1.25rem 0;
            line-height: 1.5;
            br {
                user-select: none;
            }
            .line-number {
                position: relative;
                z-index: 4;
                user-select: none;
                font-size: 0.85em;
            }
        }
        &::after {
            content: " ";
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            width: $line-numbers-wrapper-width;
            height: 100%;
            border-radius: 6px 0 0 6px;
            border-right: 1px solid mix($code-color, $code-color-background, 20%);
            background: $code-color-background;
        }
    }
}

div[class~="language-javascript"] {
    &:before {
        content: "js";
    }
}

div[class~="language-=typescript"] {
    &:before {
        content: "ts";
    }
}

div[class~="language-markup"] {
    &:before {
        content: "html";
    }
}

div[class~="language-markdown"] {
    &:before {
        content: "md";
    }
}

div[class~="language-json"] {
    &:before {
        content: "json";
    }
}

div[class~="language-ruby"] {
    &:before {
        content: "rb";
    }
}

div[class~="language-python"] {
    &:before {
        content: "py";
    }
}

div[class~="language-bash"] {
    &:before {
        content: "sh";
    }
}

div[class~="language-php"] {
    &:before {
        content: "php";
    }
}

div[class~="language-java"] {
    &:before {
        content: "java";
    }
}

div[class~="language-c"] {
    &:before {
        content: "c";
    }
}

div[class~="language-c++"] {
    &:before {
        content: "c++";
    }
}

div[class~="language-scale"] {
    &:before {
        content: "scale"
    }
}

// @import '~prismjs/themes/prism-coy.css';
// @import '~prismjs/themes/prism-dark.css';
// @import '~prismjs/themes/prism-funky.css';
@import '~prismjs/themes/prism-okaidia.css';
// @import '~prismjs/themes/prism-solarizedlight.css';
// @import '~prismjs/themes/prism-tomorrow.css';
// @import '~prismjs/themes/prism-twilight.css';